<template>
  <div class="goodsList-container">
    <van-search v-model="keyword"
                show-action
                shape="round"
                placeholder="请输入搜索关键词"
                @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-card v-for="(item, index) in goodsList"
              :key="index"
              :price="item.new_price"
              :title="item.title"
              :thumb="item.imgs[0]"
              @click="goodInfo(item._id)">
      <div slot="bottom"
           class="wrap">
        {{item.shop_name}}<span>&emsp;{{item.place}}&emsp;&gt;</span>
      </div>
    </van-card>
    <div class="getMore"
         v-if="goodsList.length">
      <van-button type="primary"
                  round
                  size="large"
                  @click="getMore">加载更多</van-button>
    </div>

  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      goodsList: [],
      keyword: ''
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 获取商品
    getGoodsList() {
      this.getGoods()
    },
    // 获取商品详情
    goodInfo(id) {
      this.$router.push({ name: 'goodsInfo', params: { id } })
    },
    // 获取更多商品
    getMore() {
      this.pageNum++
      this.getGoods()
    },
    // 搜索商品
    onSearch() {
      this.getGoods()
    },
    // 请求商品数据
    getGoods() {
      let params = { pageNum: this.pageNum, pageSize: this.pageSize, keyword: this.keyword }
      this.axios.get('/goods/getAllGoodsList', { params }).then(res => {
        if (res.data.code == 1 && params.pageNum != 1) {
          this.goodsList = this.goodsList.concat(res.data.goodsList)
          if (res.data.goodsList.length == 0 || (res.data.goodsList.length < 5 && this.pageNum != 1)) {
            this.pageNum--
            Toast('没有更多数据了')
          }
        } else if (res.data.code == 1) {
          this.goodsList = res.data.goodsList
        }
      })
    }
  }
}
</script>

<style lang="scss">
.goodsList-container {
  .van-card {
    background-color: #fff;
    .van-card__header {
      .van-card__thumb {
        width: 2.8rem;
        height: 2.8rem;
        margin-right: 0.4rem;
        img {
          object-fit: fill !important;
          border-radius: 0.26rem;
        }
      }
    }
    .van-card__content {
      .van-card__title {
        height: 1.2rem;
        max-height: 1.2rem;
        color: #000;
        font-size: 0.38rem;
        font-weight: bold;
        line-height: 0.6rem;
      }
      .van-card__price {
        font-weight: bold;
        font-size: 0.55rem;
        margin: 0.2rem 0;
      }
      .wrap {
        font-size: 0.3rem;
        color: #999;
        span {
          font-size: 0.32rem;
          color: #777;
        }
      }
    }
  }
  .getMore {
    margin: 0 0.4rem;
    .van-button {
      height: 1rem;
      line-height: 1rem;
    }
  }
}
</style>